<template>
  <div class="taskDetail">
    <div class="bg"></div>

    <van-sticky>
      <div class="nav-box u-flex-bet">
        <van-image
          width="28rem"
          height="28rem"
          :src="require('@/assets/images/taskDetail/back@2x.png')"
          @click="back()"
        />

        <div class="title">任务详情</div>

        <van-image
          width="44rem"
          height="44rem"
          :src="require('@/assets/images/taskDetail/icon_home@2x.png')"
          @click="toHome()"
        />
      </div>
    </van-sticky>

    <div class="main">
      <div class="info-box u-flex-bet">
        <div class="info u-flex">
          <van-image
            width="88rem"
            height="88rem"
            round
            :src="info.avatar ? info.avatar : defaults"
          />

          <div>
            <div class="title">{{ info.name }}</div>
            <div class="num">
              <span>剩余数量:</span>
              <span>{{ info.accept_num }}</span>
              <span>/{{ info.num }}</span>
            </div>
          </div>
        </div>

        <div class="price-box u-flex">
          <van-image
            width="36rem"
            height="36rem"
            round
            :src="require('@/assets/images/taskDetail/icon_coin@2x.png')"
          />
          <div class="price">+{{ info.price }}</div>
        </div>
      </div>

      <div class="step-box">
        <div class="title u-flex">任务步骤</div>

        <div class="step">
          <div class="text">
            1.将接发送给微信好友，在微信中打开链接完成助力 任务
          </div>

          <div class="url-box u-flex-bet">
            <div class="url u-flex">
              {{ info.task_link }}
            </div>

            <div
              class="btn u-flex-center"
              v-clipboard:copy="info.task_link"
              v-clipboard:success="onCopy"
              v-clipboard:error="onError"
            >
              复制
            </div>
          </div>
        </div>

        <div class="qrCode">
          <div
            class="code"
            id="qrcode"
            ref="qrcode"
            style="display:inline-block;"
          ></div>
        </div>

        <div class="step">
          <div class="text">
            2.查看示例验证图，按照示例图的提示和要求正确截 图上传
          </div>
        </div>

        <div class="img-box">
          <div class="tip">上传示例图</div>

          <div class="img">
            <van-image
              width="200rem"
              height="200rem"
              :src="info.src"
              @click="preview(info.src)"
            />
          </div>
        </div>
      </div>

      <div class="btn-box u-flex-center">
        <div v-if="type == 'jd'" class="btn" @click="acceptTask">
          接单
        </div>

        <div v-if="type != 'jd'" class="btn" @click="acceptTask">
          发布
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import QRCode from "qrcodejs2";
import {
  TASK_DETAIL,
  TASK_ACCEPT,
  MINE_MONNEY,
  ACCEPT_BUY,
} from "@/api/api.js";
import { Toast, ImagePreview, Field } from "vant";
import Tawk from "vue-tawk";
Vue.use(Field);
Vue.use(Toast);
Vue.use(ImagePreview);

Vue.use(Tawk, {
  tawkSrc: "https://embed.tawk.to/60896c8f62662a09efc2f99b/1f4cd04tj",
});
export default {
  name: "taskDetail",
  components: {},
  data() {
    return {
      value1: "",
      value2: "",
      fileList: [],
      id: "",
      info: "",
      type: "",
      // 接单等级
      show: false,
      radio: "",
      amountsAll: "",
      needsAll: "",
      level: "",
      curLevel: "",
      acceptLevelList: [],
      defaults: require("../.././assets/images/avator.png"),
    };
  },
  created() {
    let id = this.$route.query.id;
    let type = this.$route.query.type;
    this.type = type;
    this.id = id;
    this.getDetail(id);
  },
  mounted() {},
  methods: {
    preview(url) {
      ImagePreview([url]);
    },
    async getDetail(id) {
      const { data } = await this.$reqGet(TASK_DETAIL + "/" + id, {});
      if (data.status == 1) {
        let info = data.data;
        info["src"] = info.verify_imgs[0].url;

        // 生成二维码
        this.qrcode = new QRCode("qrcode", {
          text: info.task_link,
          width: 100,
          height: 100,
        });

        this.info = info;
      }
    },
    async acceptTask() {
      const { data } = await this.$reqPost(TASK_ACCEPT + "/" + this.id, {});
      if (data.status == 1) {
        let that = this;
        Toast.success({
          message: "接单成功!",
          onClose: function() {
            that.$router.push({ name: "orderList" });
          },
        });
      } else {
        Toast.fail(data.info);
        let datas = data.data.acceptLevelList;
        if (datas.length) {
          this.show = true;
          this.getAmount();
          for (let i = 0; i < datas.length; i++) {
            if (datas[i].current == true && i < datas.length - 1) {
              this.curLevel = i;
              // let monney = levelList[i].amount;
              this.level = i + 1;
              let needsAll = datas[i + 1].amount;
              this.needsAll = needsAll;
              this.radio = i + 1;
            }
          }

          this.acceptLevelList = datas;
        }
      }
    },
    // 选择分类
    checkLevel(index) {
      let list = this.acceptLevelList;
      this.level = index;
      let amounts = 0;
      for (let i = 0; i < list.length; i++) {
        if (list[i].current == true) {
          for (let k = i; k < index; k++) {
            amounts += list[k + 1].amount;
          }
        }
      }
      this.needsAll = parseFloat(amounts);
    },
    async getAmount() {
      const { data } = await this.$reqGet(MINE_MONNEY, {});
      console.log(data);
      if (data.status == 1) {
        let info = data.data;
        this.amountsAll =
          parseFloat(info.withdraw_amount) +
          parseFloat(info.non_withdraw_amount);
      }
    },
    // 充值等级
    async levelget() {
      let oldid = this.curLevel + 1;
      let newid = this.acceptLevelList[this.level].level_id;
      let amount = this.needsAll;
      let datas = {
        current: oldid,
        buy: newid,
        amount: amount,
      };

      const { data } = await this.$reqPost(ACCEPT_BUY, datas);
      if (data.status == 1) {
        Toast(data.info);
        this.show = false;
      } else {
        Toast(data.info);
        this.show = false;
      }
    },
    onCopy: function(e) {
      Toast("复制成功！");
    },
    onError: function(e) {
      Toast("复制失败！");
    },
    toHome() {
      this.$router.push("/");
    },
    back() {
      this.$router.goBack();
    },
  },
};
</script>

<style lang="scss" scoped>
.taskDetail {
  min-height: 100vh;
  background-color: #f5f5f5;
  font-size: 28rem;

  .bg {
    height: 464rem;
    background: linear-gradient(
      180deg,
      #2f81fe 70%,
      rgba(47, 129, 254, 0) 100%
    );
  }

  .nav-box {
    position: relative;
    padding: 20rem 24rem;
    background-color: var(--theme);

    .title {
      font-size: 36rem;
      font-weight: bold;
      color: #fff;
    }
  }

  .main {
    position: relative;
    padding: 0 24rem 100rem;

    .info-box {
      margin-top: 20rem;
      background-color: #fff;
      padding: 24rem;
      border-radius: 20rem;

      .info {
        .van-image {
          margin-right: 34rem;
        }

        .title {
          text-align: left;
          margin-bottom: 12rem;
          font-size: 32rem;
          font-weight: bold;
        }

        .num {
          text-align: left;
          color: #999;

          span {
            &:nth-child(2) {
              margin-left: 8rem;
              color: #ff4343;
            }
          }
        }
      }

      .price-box {
        .price {
          margin-left: 8rem;
          font-size: 36rem;
          color: #ff4343;
        }
      }
    }

    .step-box {
      margin-top: 24rem;
      background-color: #fff;
      border-radius: 20rem;
      overflow: hidden;

      .title {
        height: 92rem;
        background: #f3f7fe;
        text-align: left;
        font-size: 32rem;
        font-weight: bold;
        padding-left: 24rem;
      }

      .step {
        padding: 24rem;
        background-color: #fff;

        .text {
          font-size: 28rem;
          text-align: left;
        }

        .url-box {
          margin-top: 22rem;

          .url {
            font-size: 28rem;
            background-color: #f5f5f5;
            height: 88rem;
            width: 520rem;
            text-align: left;
            padding-left: 30rem;
            font-weight: bold;
            border-radius: 16rem;
          }

          .btn {
            width: 110rem;
            height: 88rem;
            color: #fff;
            background-color: var(--theme);
            border-radius: 16rem;
          }
        }
      }

      .qrCode {
        margin-left: 24rem;
        margin-bottom: 20rem;
        width: 200rem;
        height: 200rem;
        overflow: hidden;

        .van-image {
        }
      }

      .img-box {
        padding-left: 24rem;
        text-align: left;
        padding-bottom: 48rem;

        .tip {
          font-size: 24rem;
          color: var(--theme);
        }

        .img {
          margin-top: 12rem;
          width: 200rem;
          height: 200rem;
          border-radius: 16rem;
          overflow: hidden;
        }
      }
    }

    .btn-box {
      margin-top: 80rem;
      background: linear-gradient(145deg, #2cb1ff 0%, #2f81fe 100%);
      font-size: 32rem;
      font-weight: bold;
      height: 88rem;
      border-radius: 44rem;
      color: #fff;
      .btn {
        width: 100%;
      }
    }
  }
}
</style>
